<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游路线</title>
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        #main {
            background-color: white;
            width: 85%;
            height: 90vh;
        }

        form {
            height: 90vh;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            div {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                align-items: center;
                width: 70vw;

                textarea,
                input,
                select {
                    margin-left: 1vw;
                    width: 60vw;
                    height: 4vh;
                }
            }

            #photo-div {
                input {
                    width: 52vw;
                }

                img {
                    margin-left: 1vw;
                }
            }
        }

        /* #div_title{
            background-color: #1aa094;
            width: 10vw;
            height: 5vh;
            color: white;
            margin-left: 30vw;
            text-align: center;
            line-height: 5vh;
        } */

        #button-area {
            width: 20vw;
            margin-left: 25vw;
            display: flex;
            flex-direction: row;

            input {
                border: none;
                background-color: #19a094;
                color: white;
            }
        }
    </style>
</head>

<body>
    <div id="new_header">
        <script>
            $("#new_header").load("manager_header.html")
        </script>
    </div>
    <div id="main" class="right">
        <!-- 添加旅游路线 -->
        <!-- <div id="div_title">旅游路线</div> -->
        <form action="AddRouteServlet" enctype="multipart/form-data" method="post">
            <div>标题<input type="text" name="title"></div>
            <div>出发地<input type="text" name="departure"></div>
            <div>目的地<input type="text" name="destination"></div>
            <div>出团日期<input type="date" name="departure_date"></div>
            <div>结束日期<input type="date" name="end_date"></div>
            <div>价格<input type="number" name="price"></div>
            <div id="photo-div">图片<img id="previewImg" src="" alt="">
                <input type="file" onchange="showPic(this)" name="picture_url"></div>
            <div>路线简介<textarea name="introduce" id="" rows="5"></textarea></div>
            <div>状态<select name="status">
                    <option value="1">发布</option>
                    <option value="0">草稿</option>
                </select></div>
            <div id="button-area">
                <input type="submit" value="添加">
                <input type="reset" value="取消">
            </div>

        </form>
    </div>
    <script>
        //选择一个图片后显示预览图
        function showPic(file) {
            var reader = new FileReader();	// 实例化一个FileReader对象，用于读取文件
            var img = document.getElementById('previewImg'); 	// 获取要显示图片的标签

            //读取File对象的数据
            reader.onload = function (evt) {
                img.width = "100";
                img.height = "80";
                img.src = evt.target.result;
            }
            reader.readAsDataURL(file.files[0]);
        }
    </script>
</body>

</html>